<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Guide</title>
    #required_css
    <link rel="stylesheet" href="$!basePath/app/docs.css">
    <link rel="stylesheet" href="$!basePath/framework/css/ext/timeline.css">
</head>
<body>
<div class="container bs-docs-container">
    <div class="row">
        <div class="col-md-12" role="main">
            <div class="bs-docs-section">
                <h1 class="page-header">时间线</h1>
                <p class="lead">按照时间的先后顺序，展示出一个时间线，需要引入样式<code>/framework/css/ext/timeline.css</code></p>

                <h2>基本实例</h2>
                <div class="bs-example">
                    <div class="timeline">
                        <div class="timeline-panel">
                            <section class="panel">
                                <div class="timeline-date">2017-09-14 00:00</div>
                                <div class="panel-body">
                                    <b>哈哈哈哈哈</b>
                                    <p>Hi!</p>
                                </div>
                            </section>
                        </div>
                        <div class="timeline-panel">
                            <section class="panel">
                                <div class="timeline-date">2017-09-14 00:00</div>
                                <div class="panel-body">
                                    <b>哈哈哈哈哈</b>
                                    <p>Hi!</p>
                                </div>
                            </section>
                        </div>
                        <div class="timeline-panel">
                            <section class="panel">
                                <div class="timeline-date">2017-09-14 00:00</div>
                                <div class="panel-body">
                                    <b>哈哈哈哈哈</b>
                                    <p>Hi!</p>
                                </div>
                            </section>
                        </div>
                        <div class="timeline-panel">
                            <section class="panel">
                                <div class="timeline-date">2017-09-14 00:00</div>
                                <div class="panel-body">
                                    <b>哈哈哈哈哈</b>
                                    <p>Hi!</p>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
                <figure class="highlight">
                    <pre class="brush: javascript">
                        &lt;div class="timeline"&gt;
                            &lt;div class="timeline-panel"&gt;
                                &lt;section class="panel"&gt;
                                    &lt;div class="timeline-date"&gt;2017-09-14 00:00&lt;/div&gt;
                                    &lt;div class="panel-body"&gt;
                                        &lt;b&gt;哈哈哈哈哈&lt;/b&gt;
                                        &lt;p&gt;Hi!&lt;/p&gt;
                                    &lt;/div&gt;
                                &lt;/section&gt;
                            &lt;/div&gt;
                            &lt;div class="timeline-panel"&gt;
                                &lt;section class="panel"&gt;
                                    &lt;div class="timeline-date"&gt;2017-09-14 00:00&lt;/div&gt;
                                    &lt;div class="panel-body"&gt;
                                        &lt;b&gt;哈哈哈哈哈&lt;/b&gt;
                                        &lt;p&gt;Hi!&lt;/p&gt;
                                    &lt;/div&gt;
                                &lt;/section&gt;
                            &lt;/div&gt;
                            &lt;div class="timeline-panel"&gt;
                                &lt;section class="panel"&gt;
                                    &lt;div class="timeline-date"&gt;2017-09-14 00:00&lt;/div&gt;
                                    &lt;div class="panel-body"&gt;
                                        &lt;b&gt;哈哈哈哈哈&lt;/b&gt;
                                        &lt;p&gt;Hi!&lt;/p&gt;
                                    &lt;/div&gt;
                                &lt;/section&gt;
                            &lt;/div&gt;
                            &lt;div class="timeline-panel"&gt;
                                &lt;section class="panel"&gt;
                                    &lt;div class="timeline-date"&gt;2017-09-14 00:00&lt;/div&gt;
                                    &lt;div class="panel-body"&gt;
                                        &lt;b&gt;哈哈哈哈哈&lt;/b&gt;
                                        &lt;p&gt;Hi!&lt;/p&gt;
                                    &lt;/div&gt;
                                &lt;/section&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    </pre>
                </figure>
            </div>
        </div>
    </div>
</div>
</body>
#required_js
<script type="text/javascript" src="$!basePath/app/docs.js"></script>
</html>